<template>
  <!-- 搜索工作栏 -->
  <div class="header">
    <div class="search-tools">
      <SearchBar
        ref="formParams"
        :search-config="searchConfig"
        label-width="100px"
        label-position="right"
        style="margin: 0 0 15px 0"
        @transferSearchParams="transferSearchParams"
        @search="handleSearch"
        @resetSearchParams="reset"
      >
        <el-button slot="inner" size="small" type="primary" @click="handleAdd">新建推送</el-button>
      </SearchBar>
    </div>
    <!-- 列表 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      @selection-change="handleLeftChange"
      @sort-change="sortChange
      "
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="序号" type="index" />
      <el-table-column label="推送名称" align="center" prop="pushName" />
      <el-table-column label="推送标题" align="center" prop="title" />
      <el-table-column label="推送方式" align="center" prop="type">
        <template slot-scope="scope">
          <span>{{ typeList[scope.row.type] }}</span>
        </template>
      </el-table-column>
      <!-- // 推送模块 1 系统通知 2 实习招聘 3 实践项目 -->
      <el-table-column
        label="模块"
        align="center"
        prop="pushModule"
      >
        <template slot-scope="scope">
          <span>{{ moduleList[scope.row.pushModule] }}</span>
        </template></el-table-column>
      <el-table-column label="推送对象" align="center" prop="pushObject">
        <template slot-scope="scope">
          <span>{{ pushObjectList[scope.row.pushObject] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="累计推送次数" align="center" prop="actionNum">
        <template slot-scope="scope">
          <!-- 状态1 启动 2停用 -->
          <span>{{ scope.row.actionNum || 0 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最近推送时间" align="center" prop="oldPushTime">
        <template slot-scope="scope">
          <span>{{ scope.row.oldPushTime && (moment(scope.row.oldPushTime).format('yyyy-MM-DD HH') + ':00')|| '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime && (moment(scope.row.createTime).format('yyyy-MM-DD HH:mm:ss'))|| '--' }}</span>
        </template>
      </el-table-column>

      <el-table-column label="创建人" align="center" prop="creator" />
      <el-table-column
        label="状态"
        align="center"
        prop="status"
        sortable
        width="180"
      >
        <template slot-scope="scope">
          <!-- 状态1 启动 2停用 -->
          <span>{{ Number(scope.row.status) === 1 ? '启动' : '停用' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="openCheckDialog(scope.row)"
          >查看</el-button>
          <el-button
            v-if="Number(scope.row.type) !== 0"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="openEditDialog(scope.row)"
          >编辑</el-button>
          <!-- 立即推送，没有 停用按钮 -->
          <el-popconfirm
            v-if=" Number(scope.row.type) !== 0 && Number(scope.row.status) === 1"
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="确定停用推送？"
            @confirm="stopHandle(scope.row)"
          >
            <el-button
              slot="reference"
              size="mini"
              type="text"
              icon="el-icon-edit"
            >停用推送</el-button>
          </el-popconfirm>
          <!-- 立即推送，启用 -->
          <el-popconfirm
            v-if=" Number(scope.row.type) === 0 &&Number(scope.row.status) !== 1"
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="确定启用推送？"
            @confirm="nowPush(scope.row)"
          >
            <el-button
              slot="reference"
              size="mini"
              type="text"
              icon="el-icon-edit"
            >启用推送</el-button>
          </el-popconfirm>
          <!-- 定时单次、重复推送，启用 -->
          <el-popconfirm
            v-if=" Number(scope.row.type) !== 0 && Number(scope.row.status) !== 1"
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="确定启用推送？"
            @confirm="startHandle(scope.row)"
          >
            <el-button
              slot="reference"
              size="mini"
              type="text"
              icon="el-icon-edit"
            >启用推送</el-button>
          </el-popconfirm>
          <!-- 删除 -->
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="确定删除？"
            @confirm="deletePushManage(scope.row)"
          >
            <el-button
              slot="reference"
              size="mini"
              type="text"
              icon="el-icon-edit"
            >删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination
      v-show="searchParams.total > 0"
      :total="searchParams.total"
      :page.sync="searchParams.pageNo"
      :limit.sync="searchParams.pageSize"
      @pagination="getList"
    />
    <ViewNews ref="viewNews" />
    <AddPushPop ref="addPushPop" @success="getList" />
    <CheckPushPop ref="checkPushPop" @openReview="openReview" />
    <!-- 表格查看已选择的学生结果列表 -->
    <StudentResultDialog ref="StudentResultDialog" :current-row="currentRow" />
    <CompanyResultDialog ref="CompanyResultDialog" :current-row="currentRow" />
  </div>
</template>
<script>
import { leftSearchConfig } from './initData'
import SearchBar from '@/views/components/SearchBar'
import AddPushPop from './components/addPushPop.vue'
import CheckPushPop from './components/checkPushPop.vue'
import ViewNews from './components/viewNews.vue'
import { getPushManagePage, nowPushManage, updatPushManage, deletePushManage } from '@/api/company-admin-api/hireManage/index.js'
import moment from 'moment'
import StudentResultDialog from './components/studentResultDialog.vue'
import CompanyResultDialog from './components/companyResultDialog.vue'
export default {
  name: 'NewsList',
  components: {
    SearchBar,
    AddPushPop,
    CheckPushPop,
    ViewNews,
    StudentResultDialog,
    CompanyResultDialog
  },
  data() {
    return {
      moment,
      searchConfig: leftSearchConfig,
      tableData: [],
      // 推送对象 0 全部 1 企业 2 学生
      pushObjectList: {
        0: '全部',
        1: '企业',
        2: '学生'
      },
      // // 推送模块 1 系统通知 2 实习招聘 3 实践项目
      moduleList: {
        1: '系统通知',
        2: '实习招聘',
        3: '实践项目'
      },
      typeList: {
        0: '立即推送',
        1: '定时推送-单次',
        2: '定时推送-重复'
      },
      tableSelectList: [],
      searchParams: {
        pushModule: '', // 推送模块 1 系统通知 2 实习招聘 3 实践项目
        pushName: '',
        type: '', // 推送类型 0 立即推送 1 定时推送-单次 2 定时推送-重复
        status: '', // 1 启用 2 停用
        sortField: { field: '', order: '' },
        pageNo: 1,
        pageSize: 10,
        total: 0
      },
      sortingFields: null,
      columnList: [],
      loading: false,
      currentRow: {}
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 定时单次、重复推送，停用
    stopHandle(row) {
      const params = JSON.parse(JSON.stringify(row))
      // string 状态 1启用 2停用
      params.status = '2'
      updatPushManage(params).then(res => {
        if (res && res.code === 0) {
          this.$message.success('操作成功')
          this.getList()
        }
      })
    },
    // 定时单次、重复推送，启用
    startHandle(row) {
      const params = JSON.parse(JSON.stringify(row))
      // string 状态 1启用 2停用
      params.status = '1'
      updatPushManage(params).then(res => {
        if (res && res.code === 0) {
          this.$message.success('操作成功')
          this.getList()
        }
      })
    },
    // 立即推送
    nowPush({ id }) {
      nowPushManage(id).then(res => {
        if (res && res.code === 0) {
          this.$message.success('立即推送成功')
          this.getList()
        }
      })
    },
    // 查看
    openCheckDialog(row) {
      this.currentRow = JSON.parse(JSON.stringify(row))
      this.$refs.checkPushPop.open(this.currentRow)
    },
    openReview() {
      // 推送对象 0 全部 1 企业 2 学生
      if (Number(this.currentRow.pushObject) === 2) {
        const pushObjectId = JSON.parse(this.currentRow.pushObjectId)
        this.$refs.StudentResultDialog.open(pushObjectId)
      } else if (Number(this.currentRow.pushObject) === 1) {
        const pushObjectId = JSON.parse(this.currentRow.pushObjectId)
        this.$refs.CompanyResultDialog.open(pushObjectId)
      }
    },
    // 编辑
    openEditDialog(row) {
      this.currentRow = JSON.parse(JSON.stringify(row))
      this.$refs.addPushPop.open({ row: this.currentRow, popType: 'edit' })
    },
    // 删除
    deletePushManage(row) {
      deletePushManage({ id: row.id }).then(res => {
        if (res && res.code === 0) {
          this.$message.success('删除成功')
          this.getList()
        }
      })
    },
    // 搜索条件改变
    transferSearchParams(params) {
      for (const key in params) {
        if (Object.hasOwnProperty.call(this.searchParams, key)) {
          this.searchParams[key] = params[key]
        }
      }
      console.log('searchParams>>>>', this.searchParams)
    },
    reset(data) {
      this.searchParams = this.$options.data().searchParams
      this.pageNo = 1
      this.getList()
    },
    handleSearch(data) {
      this.pageNo = 1
      this.getList()
    },
    // 多选
    handleLeftChange(val) {
      this.leftMultipleSelection = val
    },
    sortChange({ column, prop, order }) {
      const sortType = {
        ascending: 'asc',
        descending: 'desc'
      }
      const sortField = {
        field: prop,
        order: order !== null ? sortType[order] : null
      }
      if (order === null) {
        Object.assign(this.searchParams.sortField, {
          field: '',
          order: ''
        })
        this.getList()
      } else {
        Object.assign(this.searchParams.sortField, sortField)
        this.getList()
      }
    },
    async getList() {
      this.loading = true
      const params = JSON.parse(JSON.stringify(this.searchParams))
      for (const key in params) {
        if (params[key] === '' || params[key] === null) {
          delete params[key]
        }
      }
      if (params.sortField.order === '') {
        delete params.sortField
      }
      const { code, data } = await getPushManagePage(params)
      if (code === 0) {
        this.tableData = data.list
        this.searchParams.total = data.total
      } else {
        this.tableData = []
      }
      this.loading = false
    },
    handleSuccessCall() {
      this.$message.success('操作成功')
      this.tableSelectList = []
      this.getList()
    },
    // 查看
    handleView(row) {
      this.$refs.viewNews && this.$refs.viewNews.open(row.id)
    },
    // 新建
    async handleAdd() {
      this.$refs.addPushPop && this.$refs.addPushPop.open({
        popType: 'add', // add or edit
        columnList: this.columnList // edit 时，传入推送消息数据
      })
    }
  }
}
</script>
<style lang="scss">
    .search-result-table {
        .el-table__cell {
            position: relative;
            padding: 20px 0;
        }
    }

</style>
<style lang='scss' scoped>
    .header {
        display: flex;
        flex-direction: column;
        padding: 0 20px;

        .search-tools {
          margin-top: 20px;
            display: flex;
            justify-content: space-between;
        }

        .title-box {
            // position: relative;

            .ranking-icons {
                position: absolute;
                left: 0;
                top: 0;

                .icon-item {
                    color: blue;
                    border: 1px solid blue;
                    margin-right: 3px;
                    padding: 0 2px;
                }
            }
        }
        .btns {
            color: #02A7F0;
            cursor: pointer;
            display: inline-block;
            margin-right: 10px;
        }

        .delete {
          color: #f56c6c;
        }
    }
</style>
